<template>
  <div style="padding:10px">
    <div :id="id" :style="{width: width, height: height}"></div>
  </div>
</template>


<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/dataZoom");
// require("echarts/config")
export default {
  name: "echart",
  mounted() {},
  data() {
    return {
      option: {},
      createdIt: false,
    };
  },
  watch: {
    //监听两个对象（1.横坐标的数据，2.纵坐标的数据）触发更新
    seriesData: function (n, o) {
      if (n.length > 0) {
        this.seriesData = n;
        this.refresh(n, 0);
      }
    },
    xAxisData: function (n, o) {
      if (n.length > 0) {
        this.xAxisData = n;
        this.refresh(n, 1);
      }
    },
  },
  props: {
    interval: {
      type: Number,
      default: null,
    },
    gridLeft: {
      type: Number,
      default: 60,
    },
    showXYxis: {
      type: Boolean,
      default: true,
    },
    showDataZoom: {
      type: Boolean,
      default: true,
    },
    labelPositon: {
      type: String,
      default: "top",
    },
    name: {
      type: String,
      default: null,
    },
    id: {
      type: String,
      default: null,
    },
    width: {
      type: String,
      default: null,
    },
    height: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
    xAxis: {
      type: String,
      default: null,
    },
    series: {
      type: String,
      default: null,
    },
    yAxis: {
      type: String,
      default: null,
    },
    tooltip: {
      type: String,
      default: null,
    },
    type: {
      type: String,
      default: null,
    },
    value: {
      type: String,
      default: "value",
    },
    category: {
      type: String,
      default: "category",
    },
    isClick: {
      type: Boolean,
      default: true,
    },
    seriesData: {
      type: Array,
      default: () => [],
    },
    legendData: {
      type: Array,
      default: () => [],
    },
    xAxisData: {
      type: Array,
      default: () => [],
    },
    yAxisData: {
      type: Array,
      default: () => [],
    },
  },
  created() {},
  methods: {
    refresh(n, type) {
      this.option = {
        legend: {
          data: this.legendData,//底部不同折线的文字说明
          left: "center",
          textStyle: {
            color: "black",
          },
        },
        title: {
          text: this.title, //左上角title
          left: "left",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          show: this.showXYxis,//显示横坐标与否
          type: this.category,//横着显示还是竖着显示
          data: []
        },
        yAxis: { 
          show: this.showXYxis,//显示纵坐标与否
          type: this.value,//横着显示还是竖着显示
          data: this.yAxisData,
        },
        grid: {
          left: this.gridLeft,//左侧的文字占用的宽度
        },

        series: [],
      };
      if (type == 0) {
        this.$set(this.option.xAxis, "data", this.xAxisData);
        this.$set(this.option, "series", n);
      } else {
        this.$set(this.option.xAxis, "data", n);
        this.$set(this.option, "series", this.seriesData);
      }
      if (this.showDataZoom) {
        this.$set(this.option, "dataZoom" , [{
            type: 'inside',
            start: 0,
            end: 100
        }, {
            start: 0,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }])
      } else {
        this.$set(this.option, "dataZoom", [])
      }
      this.drawLine(this.option);
    },
    drawLine(option) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.id));
      // 绘制图表
      myChart.setOption(option, true);
      myChart.resize();
      myChart.off("click");
      if (this.isClick) {
        myChart.on("click", (params) => {
          this.$emit("getEchartData", params);
        });
      }
    },
  },
};
</script>

<style scoped>
</style>